<template>
	<view class="content">
		<swiper class="swiper1" :circular="true" autoplay="true">
			<swiper-item v-for="item in list1" :key="item.id">
				<image class="cover" :src="getFullImageUrl(item.avatar)" @tap="goToPage(item.linkUrl)"></image>
			</swiper-item>
		</swiper>

		<view class="chooses">
			<u-row justify="space-between" gutter="5">
				<u-col span="3" v-for="(item,index) in select" @click="toTestPage(index)">
					<view class="choose_bg">
						<view class="image">
							<image :src="item.image" class="images"></image>
						</view>

						<view class="c_text">
							{{item.name}}
						</view>
					</view>
				</u-col>
			</u-row>
			<view>
				<view>
					<u-notice-bar class="choose_zixun" :text="list2.title" direction="row" step="true" color="#000000"
						bgColor="#effaff">
					</u-notice-bar>
				</view>

			</view>
		</view>
		<view class="zhong"></view>
		<view class="xinxi">
			<u-subsection class="sub" :list="list5" :current="current" @change="dianji">
			</u-subsection>
			<view>
				<u-cell v-for="item in list3" @click="handle(item.id)" :title="item.informationTitle" isLink>
				</u-cell>
			</view>

		</view>
	</view>

</template>


<script>
	import {
		getImages,
		getKnowledge
	} from '../../api/index/index'
	export default {
		data() {
			return {
				baseURL: this.$baseURL,
				title: '',
				one: true,
				two: false,
				three: false,
				current: 0,
				t_class1: "t_text_plus",
				t_class2: "t_text",
				t_class3: "t_text",
				t_class4: "t_text_plus",
				list1: [],
				list2: {
					title: [
						"与你同行 : 新学期心理咨询服务已开启",
						"模拟面试 : 身临其境的体验面试"
					]
				},
				list3: [],
				list4: [],
				list5: [],
				select: [{
						id: 1,
						name: "心理健康测试",
						image: this.$baseURL + "/profile/upload/2025/05/10/choose1_20250507104600A051_20250510150002A013.png"
					},
					{
						id: 2,
						name: "就业基础知识",
						image: this.$baseURL + "/profile/upload/2025/05/10/choose2_20250507105214A053_20250510150010A014.png"
					},
					{
						id: 3,
						name: "职业规划测试",
						image: this.$baseURL + "/profile/upload/2025/05/10/choose3_20250507105305A054_20250510150016A015.png"
					},
					{
						id: 4,
						name: "模拟面试",
						image: this.$baseURL + "/profile/upload/2025/05/10/choose4_20250507105342A055_20250510150023A016.png"
					}
				],
				groupedList: {},
				uniqueTypes: ''
			}
		},
		onLoad() {
			this.getHomeData(); // 调用首页数据接口
		},

		methods: {
			getFullImageUrl(avatarPath) {
				if (!avatarPath) {
					console.error('avatarPath is undefined or empty');
					return ''; // 或者返回一个默认图片路径
				}

				// 确保 avatarPath 不以斜杠开头，避免双斜杠
				const path = avatarPath.startsWith('/') ? avatarPath.substring(1) : avatarPath;

				// 打印完整 URL 用于调试
				const fullUrl = `${this.$baseURL}/${path}`;

				return fullUrl;
			},
			getHomeData() {
				getImages().then((res) => {
						if (res.code == 200) {
							console.log(res.rows)
							this.list1 = res.rows
						} else {
							console.log(res.msg)
						}
					}),
					getKnowledge().then((res) => {
						if (res.code == 200) {
							// console.log(res.rows)
							// 先提取所有类型，去重，再映射为中文  动态修改tab栏
							this.uniqueTypes = [...new Set(res.rows.map(item => item.informationType))];
							// console.log(this.uniqueTypes)
							this.list5 = this.uniqueTypes.map(type => {
								return type === '0' ?
									'就业知识' :
									type === '1' ?
									'求职政策' :
									'心理健康资讯';
							});

							// 把 res.rows 按照 informationType 分组存起来
							this.groupedList = {};
							//基础知识部分标题
							res.rows.forEach(item => {
								//分组
								const type = item.informationType;
								if (!this.groupedList[type]) {
									this.groupedList[type] = [];
								}
								this.groupedList[type].push(item);
							});
							console.log(this.groupedList)
							this.list4[0] = this.groupedList[0]
							console.log(this.list4[0])
							this.list3 = this.list4[0]

						} else {
							console.log(res.msg)
						}
					})

			},
			//轮播图跳转
			goToPage(linkUrl) {
				if (linkUrl) {
					uni.navigateTo({
						url: linkUrl
					});
				}
			},
			dianji(index) {
				this.current = index
				if (index == 0) {
					this.list4[0] = this.groupedList[0]
					this.list3 = this.list4[0]
				} else if (index == 1) {
					this.list4[1] = this.groupedList[1]
					this.list3 = this.list4[1]
				} else {
					this.list4[2] = this.groupedList[2]
					this.list3 = this.list4[2]
				}
			},
			/*根据num获取文章内容*/
			handle(num) {
				uni.navigateTo({
					url: "./text/text?id=" + num
				});

			},

			// 跳转各种测试页面
			toTestPage(id) {
				// 

				switch (id) {
					case 0:
						uni.navigateTo({
							url: "/pagesA/psychologyModel/psychHome"
						});
						break
					case 1:
						// console.log("跳转到就业基础知识页面")

						uni.navigateTo({
							url: "/pagesA/knowledgeModel/knowledge/index"
						});
						break
					case 2:
						uni.navigateTo({
							url: "/pagesA/careerModel/testList/testList"
						});
						break

					case 3:
						// console.log("跳转到模拟面试页面")
						uni.navigateTo({
							url: "/pagesA/mianshi/mianshi/mianshi"
						});
						break
				}

			}


		}
	}
</script>

<style>
	.swiper1,
	.cover {
		width: 100%;
		height: 350rpx;
	}

	.images {
		width: 100rpx;
		height: 100rpx;
	}

	.chooses {
		margin: 20rpx 0;
		background-color: #ffffff;
		padding: 10rpx 20rpx;
	}

	.choose_bg {

		margin: auto;
		height: 180rpx;

	}

	.image {
		margin: auto;
		width: 100rpx;
	}

	.choose_zixun {
		height: 50rpx;
	}

	.zhong {
		height: 1rpx;
		background-color: #dedede;
	}

	.c_text {
		margin-top: 15rpx;
		font-size: 27rpx;
		font-family: KaiTi;
		letter-spacing: 0rpx;
		text-align: center;
	}
</style>